
<template>
  <div class="show-info-container">
    <el-divider content-position="right">显示信息</el-divider>
    <el-row type="flex" class="content-container" justify="space-around" :gutter="10">
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[0] }}</el-col>
            <el-col :span="12" class="show-info">{{ showInfo.goods_class_name?showInfo.goods_class_name:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[1] }}</el-col>
            <el-col :span="12" class="show-info">{{ showInfo.goods_class_code?showInfo.goods_class_code:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[2] }}</el-col>
            <el-col :span="12" class="show-info">第{{ showInfo.deep?showInfo.deep:'暂无' }}级别</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { getSingleGoodsClass } from '@/api/laravel-fast-api/v1/service/group/goodsClass'

export default
{
  // 组件名称
  name: 'ShowInfo',
  // 组件
  components:
  {

  },
  props:
  {
    goodsClassId: {
      type: [Number, String],
      default: 0
    }

  },
  // 数据
  data()
  {
    return {
      titleArray: ['当前商品分类', '分类编码', '分类级别'],
      showInfo: {
        goods_class_name: null,
        goods_class_code: null,
        deep: 0
      },
      goods_class_id: 0
    }
  },
  // 计算属性
  computed:
	{
	},
  // 监听
  watch:
{
  goodsClassId: {
    handler(value)
    {
      // console.log('update' + value)

      if (parseInt(value) > 0)
      {
        this.goods_class_id = parseInt(value)

        this.getSingleGoodsClass({ goods_class_id: this.goods_class_id })
      }
    },
    deep: true,
    immediate: true
  }
},
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {

  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    async getSingleGoodsClass(data)
    {
      const result = await getSingleGoodsClass(data).then(res =>
      {
        return new Promise((resolve, reject) =>
        {
          if (res && res.code === 0)
          {
            resolve(res.data)
          }
          else
          {
            reject('请求失败')
          }
        })
      })
      // console.log(result)
      if (result)
      {
        this.showInfo = result
      }
    }
  }
}
</script>
<style lang='scss' >
.show-info-container{
	width: 100%;
	height: auto;
	/* background-color: pink; */
	.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .content-item {
    border-radius: 4px;
    min-height: 36px;
	background-color: #FFFFFF;
	font-size: 16px;
	line-height: 36px;
	color:#409EFF;
	text-align: center;
	.show-info{
	color:#303133;
	font-size: 16px;
	font-weight: bolder;

	}
  }
  .content-container{
    padding: 10px 0;
    background-color: #409EFF;
	opacity:0.8;
  }

}

</style>
